<template>
  <div class="div-user-sum">
    <div v-if="!glbdetailshow">
      <div class="div-top">
        <span>模型管理</span>
      </div>
      <span class="search_label">模型名称:</span>
      <el-input
        placeholder="请输入模型名称"
        v-model="modelName"
        style="width:200px;margin-left: 10px"
        clearable
      />
      <el-button
        type="primary"
        style="margin:0 0 10px 10px"
        @click="currentChange(1)"
        >搜索</el-button
      >
      <el-button type="primary" style="margin:0 0 10px 10px" @click="openAdd"
        >添加模型</el-button
      >
      <div style="margin: 10px;">
        <el-table :data="tableDate" border>
          <el-table-column
            prop="modelCover"
            label="封面"
            width="140px"
            align="center"
          >
            <template slot-scope="scope">
              <el-image
                :src="baseurl + scope.row.modelCover"
                class="modelCover-content"
                fit="modelCover"
              >
                <div slot="error" class="image-slot">
                  <i class="el-icon-picture-outline"></i>
                </div>
              </el-image>
            </template>
          </el-table-column>
          <el-table-column
            prop="modelName"
            label="模型名称"
            align="center"
            show-overflow-tooltip
          >
          </el-table-column>

          <!-- <el-table-column prop="state" label="状态" align="center">
					<template slot-scope="scope">
						<el-tag type='success' v-if="scope.row.state == '1'">已启用</el-tag>
						<el-tag type='danger' v-if="scope.row.state == '2'">已禁用</el-tag>
					</template>
				</el-table-column> -->
          <el-table-column label="操作" align="center" width="350">
            <template slot-scope="scope">
              <el-button
                type="primary"
                @click="openEdit(scope.row)"
                size="small"
                >编辑</el-button
              >
              <el-button
                type="danger"
                @click="openDelete(scope.row)"
                size="small"
                >删除</el-button
              >
              <el-button
                type="primary"
                @click="openadmin(scope.row)"
                size="small"
                >管理组件</el-button
              >
              <el-button
                type="primary"
                @click="openhref(scope.row)"
                size="small"
                >预览模型</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <div style="margin: 10px; text-align: center;">
          <el-pagination
            background
            @current-change="currentChange"
            :current-page="pageNum"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </div>
      </div>
      <el-dialog
        title="添加模型"
        :show-close="false"
        :close-on-press-escape="false"
        :close-on-click-modal="false"
        :append-to-body="true"
        :visible.sync="addDialog"
        width="800px"
      >
        <el-form
          :model="addForm"
          :rules="rules"
          ref="addForm"
          label-width="110px"
          style="width: calc(100% - 40px);"
        >
          <el-form-item label="模型名称" prop="modelName">
            <el-input
              placeholder="请输入模型名称"
              v-model="addForm.modelName"
              maxlength="255"
              clearable
            ></el-input>
          </el-form-item>

          <el-form-item label="专业" prop="majorId">
            <el-select
              v-model="addForm.majorId"
              placeholder="请选择专业"
              style="width:100%"
            >
              <el-option
                v-for="item in majors"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="封面" prop="modelCover">
            <div class="avataruploads">
              <div
                class="avatarupcover avatarupcover-add"
                @click="$refs.icon_add.click()"
              >
                <i class="el-icon-plus"></i>
              </div>
              <img
                :src="baseurl + addForm.modelCover"
                v-if="addForm.modelCover"
              />
              <input
                ref="icon_add"
                type="file"
                accept=".jpg, .png, .JPG, .PNG"
                style="display: none"
                @change="iconAdd($event)"
              />
            </div>
          </el-form-item>
          <el-form-item prop="modelUrl" label="模型资源">
            <div
              class="drop-area el-upload-dragger"
              @click="clickElement($event, 'upload_folder')"
              @drop="handleFileDrop($event)"
              @dragleave="stopEvent($event)"
              @dragenter="stopEvent($event)"
              @dragover="stopEvent($event)"
            >
              <i class="el-icon-upload"></i>
              <div class="el-upload__text">
                请将 .glb 文件拖拽到此处
                <br />
                <em v-if="allFileNum > 0 && allFileNum === upFileNum"
                  >已上传</em
                >
                <em v-if="allFileNum > 0 && allFileNum > upFileNum"
                  >正在上传：{{ upFileNum }}/{{ allFileNum }}</em
                >
                <em v-if="allFileNum == 0" style="color: #F56C6C;"
                  >未上传, 请选择文件</em
                >
                <input
                  ref="upload_folder"
                  type="file"
                  accept=".glb"
                  style="display: none"
                  @change="handleFileInput($event)"
                />
              </div>
            </div>
            <ul
              v-if="objects && objects.length"
              class="el-upload-list el-upload-list--text"
            >
              <li
                v-for="(object, index) in objects"
                :key="index"
                class="el-upload-list__item is-success"
              >
                <a class="el-upload-list__item-name">
                  <i class="el-icon-document"></i> {{ object.key }}
                </a>
                <label
                  v-if="!object.uploading"
                  class="el-upload-list__item-status-label"
                  ><i class="el-icon-upload-success el-icon-circle-check"></i
                ></label>
                <div
                  v-else
                  role="progressbar"
                  :aria-valuenow="object.progress"
                  aria-valuemin="0"
                  aria-valuemax="100"
                  class="el-progress el-progress--line"
                >
                  <div class="el-progress-bar">
                    <div class="el-progress-bar__outer" style="height: 2px;">
                      <div
                        class="el-progress-bar__inner"
                        :style="`width: ${object.progress || 0}%;`"
                      ></div>
                    </div>
                  </div>
                  <div class="el-progress__text" style="font-size: 13px;">
                    {{ object.progress || 0 }}%
                  </div>
                </div>
                <el-button
                  type="danger"
                  size="mini"
                  @click="deleteUploadedFile(index)"
                  style="margin-left: 10px;"
                  >删除</el-button
                >
              </li>
            </ul>
          </el-form-item>
          <el-form-item label="模型介绍">
            <el-col :span="24">
              <editor-more
                :content="addForm.modelInfo"
                @change="introductionAddChange"
              ></editor-more>
            </el-col>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="resetAdd" :disabled="dataloading || uploadingAll"
            >取 消</el-button
          >
          <el-button
            type="primary"
            @click="addData"
            :disabled="dataloading || uploadingAll"
            >确 定</el-button
          >
        </div>
      </el-dialog>
      <el-dialog
        title="修改模型"
        :show-close="false"
        :close-on-press-escape="false"
        :close-on-click-modal="false"
        :append-to-body="true"
        :visible.sync="editDialog"
        width="800px"
      >
        <el-form
          :model="editForm"
          :rules="rules"
          ref="editForm"
          label-width="110px"
          style="width: calc(100% - 40px);"
        >
          <el-form-item label="模型名称" prop="modelName">
            <el-input
              placeholder="模型名称"
              v-model="editForm.modelName"
              maxlength="255"
              clearable
            ></el-input>
          </el-form-item>

          <!-- <el-form-item label="专业" prop="majorId">
					<el-select v-model="editForm.majorId" placeholder="请选择专业" style="width:100%">
						<el-option v-for="item in majors" :key="item.id" :label="item.name" :value="item.id">
						</el-option>
					</el-select>
				</el-form-item> -->

          <el-form-item label="封面" prop="modelCover">
            <div class="avataruploads">
              <div
                class="avatarupcover avatarupcover-add"
                @click="$refs.icon_edit.click()"
              >
                <i class="el-icon-plus"></i>
              </div>
              <img
                :src="baseurl + editForm.modelCover"
                v-if="editForm.modelCover"
              />
              <input
                ref="icon_edit"
                type="file"
                accept=".jpg, .png, .JPG, .PNG"
                style="display: none"
                @change="iconEdit($event)"
              />
            </div>
          </el-form-item>
          <el-form-item prop="modelUrl" label="模型资源">
            <div
              class="drop-area el-upload-dragger"
              @click="clickElement($event, 'upload_folder')"
              @drop="handleFileDrop($event)"
              @dragleave="stopEvent($event)"
              @dragenter="stopEvent($event)"
              @dragover="stopEvent($event)"
            >
              <i class="el-icon-upload"></i>
              <div class="el-upload__text">
                请将 .glb 文件拖拽到此处
                <br />
                <em v-if="allFileNum > 0 && allFileNum === upFileNum"
                  >已上传</em
                >
                <em v-if="allFileNum > 0 && allFileNum > upFileNum"
                  >正在上传：{{ upFileNum }}/{{ allFileNum }}</em
                >
                <div v-if="!allFileNum" v-html="resourceMessage"></div>
                <input
                  ref="upload_folder"
                  type="file"
                  accept=".glb"
                  style="display: none"
                  @change="handleFileInput($event)"
                />
              </div>
            </div>
            <ul
              v-if="objects && objects.length"
              class="el-upload-list el-upload-list--text"
            >
              <li
                v-for="(object, index) in objects"
                :key="index"
                class="el-upload-list__item is-success"
              >
                <a class="el-upload-list__item-name">
                  <i class="el-icon-document"></i> {{ object.key }}
                </a>
                <label
                  v-if="!object.uploading"
                  class="el-upload-list__item-status-label"
                  ><i class="el-icon-upload-success el-icon-circle-check"></i
                ></label>
                <div
                  v-else
                  role="progressbar"
                  :aria-valuenow="object.progress"
                  aria-valuemin="0"
                  aria-valuemax="100"
                  class="el-progress el-progress--line"
                >
                  <div class="el-progress-bar">
                    <div class="el-progress-bar__outer" style="height: 2px;">
                      <div
                        class="el-progress-bar__inner"
                        :style="`width: ${object.progress || 0}%;`"
                      ></div>
                    </div>
                  </div>
                  <div class="el-progress__text" style="font-size: 13px;">
                    {{ object.progress || 0 }}%
                  </div>
                </div>
                <!-- <el-button type="danger" size="mini" @click="deleteUploadedFile(index)" style="margin-left: 10px;">删除</el-button> -->
              </li>
            </ul>
          </el-form-item>
          <el-form-item label="组件介绍">
            <el-col :span="24">
              <editor-more
                :content="editForm.modelInfo"
                @change="introductionAddChange"
              ></editor-more>
            </el-col>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="resetEdit" :disabled="dataloading || uploadingAll"
            >取 消</el-button
          >
          <el-button
            type="primary"
            @click="editData"
            :disabled="dataloading || uploadingAll"
            >确 定</el-button
          >
        </div>
      </el-dialog>
    </div>
    <!-- 子组件处理 -->
    <glbdetails
      :vrModelId="vrModelId"
      v-if="glbdetailshow"
      @glbdetailsUpdate="glbdetailsUpdate"
      @back="back"
    />
  </div>
</template>

<script>
import EditorMore from '@/components/Editor/index.vue'
import glbdetails from './glbdetails.vue'
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'
import * as THREE from 'three'
import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader.js'
import { putProgress, createMultipartUpload, listObjects } from '@/utils/oss.js'
import { majorList } from '@/api/major.js'
import {
  modelSave,
  vrModelList,
  removeVrModel,
  modelUpdate,
  selectVrModelDetail
} from '@/api/model.js'

export default {
  components: {
    glbdetails,
    EditorMore
  },
  data() {
    return {
      vrModelId: '',
      glbdetailshow: false,
      tableDate: [],
      modelName: '',
      majorId: '',
      glbdetails: [],
      pageNum: 1,
      pageSize: 10,
      total: 0,
      majors: [],
      types: [
        {
          value: 1,
          label: '平台实验'
        },
        {
          value: 2,
          label: '自定义模块实验'
        }
      ],
      modes: [
        {
          value: 1,
          label: '学习模式'
        },
        {
          value: 2,
          label: '考核模式'
        }
      ],

      objects: [],
      allFileNum: 0,
      upFileNum: 0,
      resourceMessage: '', // 资源上传框提示信息
      uploadingAll: false,

      dataloading: false,
      addDialog: false,
      editDialog: false,
      addForm: {
        majorId: '',
        modelName: '',
        modelCover: '',
        modelUrl: '',
        attachPrefix: ''
      },
      editForm: {
        vrResourceId: '',
        majorId: '',
        modelName: '',
        modelCover: '',
        modelUrl: '',
        attachPrefix: ''
      },
      rules: {
        modelName: [
          {
            required: true,
            message: '请输入模型名称',
            trigger: 'blur'
          }
        ],
        modelCover: [
          {
            required: true,
            message: '请上传封面',
            trigger: 'blur'
          }
        ],

        majorId: [
          {
            required: true,
            message: '请选择专业',
            trigger: 'blur'
          }
        ],
        modelUrl: [
          {
            required: true,
            message: '请上传模型',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  created() {
    this.getMajorList()
    this.getDateList()
    // const cachedTableData = localStorage.getItem('tableDate')
    // if (cachedTableData) {
    //   this.tableDate = JSON.parse(cachedTableData)
    // }
  },
  methods: {
    openAdd() {
      this.addDialog = true
      this.objects = []
    },
    iconAdd(event) {
      const files = event.target.files
      if (!files || files.length <= 0) {
        return
      }
      const file = files[0]
      const key = `szhjxpt/vrResourceCover/${file.name}`
      putProgress(key, file).then(res => {
        console.log('当前数据22', key)

        this.addForm.modelCover = key
        this.$refs.icon_add.value = ''
      })
    },
    addData() {
      this.dataloading = true
      setTimeout(_ => {
        this.dataloading = false
      }, 1000)
      this.$refs.addForm.validate(valid => {
        if (valid) {
          var data = Object.assign({}, this.addForm)
          modelSave(data).then(res => {
            if (res.code == '200') {
              this.$message({
                message: '添加成功',
                type: 'success'
              })
              this.getDateList()
            } else {
              this.$message({
                message: res.message,
                type: 'error'
              })
            }
          })
          // this.tableDate.push(this.addForm)
          this.addDialog = false

          // localStorage.setItem('tableDate', JSON.stringify(this.tableDate))
          console.log('存入成功', this.tableDate)
        }
      })
    },
    resetAdd() {
      this.addDialog = false
      this.allFileNum = 0
      this.$refs.addForm.resetFields()
      this.$refs.addForm.clearValidate()
    },
    openEdit(item) {
      selectVrModelDetail({ vrModelId: item.vrModelId }).then(res => {
        if (res.code == '200') {
          this.$message({
            message: '查询模型信息成功',
            type: 'success'
          })
          this.editDialog = true
          this.editForm = Object.assign({}, item)
          this.editForm.vrModelComponentReqList =
            res.data.vrModelComponentDtoList
          this.objects = []
          this.checkOSSResource()
        } else {
          this.$message({
            message: res.message,
            type: 'error'
          })
        }
      })
    },
    iconEdit(event) {
      const files = event.target.files
      if (!files || files.length <= 0) {
        return
      }
      const file = files[0]
      const key = `szhjxpt/vrResourceCover/${file.name}`
      putProgress(key, file).then(res => {
        this.editForm = Object.assign({}, this.editForm, {
          modelCover: key
        })
        this.$refs.icon_edit.value = ''
      })
    },
    editData() {
      this.dataloading = true
      setTimeout(() => {
        this.dataloading = false
      }, 1000)
      this.$refs.editForm.validate(valid => {
        if (valid) {
          var data = Object.assign({}, this.editForm)

          modelUpdate(data).then(res => {
            if (res.code == '200') {
              this.$message({
                message: '更新成功',
                type: 'success'
              })

              this.getDateList()
            } else {
              this.$message({
                message: res.message,
                type: 'error'
              })
            }
            this.editDialog = false
          })
          // const index = this.tableDate.findIndex(
          //   item => item.vrResourceId === this.editForm.vrResourceId
          // )
          // if (index !== -1) {
          //   this.tableDate.splice(index, 1, this.editForm)
          //   this.editDialog = false
          //   // Save updated tableDate to local storage
          //   localStorage.setItem('tableDate', JSON.stringify(this.tableDate))
          //   console.log('更新成功', this.tableDate)
          // }
        }
      })
    },
    resetEdit() {
      this.editDialog = false
      this.$refs.editForm.resetFields()
      this.$refs.editForm.clearValidate()
    },

    getMajorList() {
      majorList({}).then(res => {
        this.majors = res.data || []
      })
    },
    currentChange(pageNum) {
      this.pageNum = pageNum
      this.getDateList()
    },
    getDateList() {
      var data = {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        modelName: this.modelName ? this.modelName : null
      }
      vrModelList(data).then(async res => {
        this.tableDate = res.data.list
        this.total = res.data.total
      })
    },
    setValue(modelUrl, attachPrefix) {
      if (this.addDialog) {
        this.addForm.modelUrl = modelUrl
        this.addForm.attachPrefix = attachPrefix
      }
      if (this.editDialog) {
        this.editForm.modelUrl = modelUrl
        this.editForm.attachPrefix = attachPrefix
      }
    },
    /**
     * json文件是否上传
     */
    checkSuccess() {
      this.allFileNum = this.objects.length
      this.upFileNum = this.objects.filter(
        item => item.uploading === false
      ).length
      if (this.allFileNum == this.upFileNum) {
        this.uploadingAll = false
        this.$refs['upload_folder'].value = ''
      }
    },
    /**
     * 资源文件上传
     * @param {File} file 本地文件
     * @param {String} relativePath 文件相对路径
     */
    handleResourceUpload(file, relativePath) {
      const that = this
      const key = `szhjxpt/vrResource/${relativePath}`
      // 检查重复上传
      let index = this.objects.findIndex(item => item.key === key)
      if (index > -1) {
        this.objects[index].file = file
        return
      }
      this.uploadingAll = true
      // 上传
      this.objects.push({
        key: key,
        file: file,
        uploading: true
      })
      createMultipartUpload(key, file, this.multiUploadProgress).then(
        ({ name, res }) => {
          const target = that.objects.find(object => object.key === key)
          target.uploading = false

          if (res && res.requestUrls && res.requestUrls.length > 0) {
            const requestUrl = res.requestUrls[0]
            console.log('requestUrl:', requestUrl)
            const glbUrl = /[\w.:-_\/]*\.glb/i

            if (requestUrl) {
              const urlWithoutQuery = requestUrl.split('?')[0] // 移除查询参数部分
              console.log('Final URL:', urlWithoutQuery)
              const modelUrl = urlWithoutQuery // 使用去掉查询参数的 URL

              if (name && name.match(glbUrl)) {
                that.checkSuccess()
                const attachPrefix = name.replace(/\.glb.*$/, '')
                that.setValue(key, attachPrefix)
              }
            } else {
              that.checkSuccess()
              console.error('requestUrl is empty or invalid.')
            }
          }
        }
      )
    },
    /**
     * 分片上传进度
     * @param {Number} progress 分片上传进度, 取值范围: 0~1
     * @param {Object} checkpoint 本地分片上传结果
     */
    multiUploadProgress(progress, checkpoint) {
      if (!checkpoint) {
        return
      }
      const target = this.objects.find(item => item.key === checkpoint.name)
      this.$set(target, 'checkpoint', checkpoint)
      this.$set(target, 'progress', Math.round(progress * 100))
    },
    /**
     * 点击上传文件 / 目录
     */
    handleFileInput(event) {
      console.log('Hello Runoob!', event)
      const file = event.target.files[0]
      if (file) {
        if (this.objects.length > 0) {
          this.objects = []
          // this.$message.error('只能上传一个文件，请先删除已上传的文件')
          // return
        }

        const reader = new FileReader()
        reader.onload = e => {
          const arrayBuffer = e.target.result
          const gltf_loader = new GLTFLoader()

          // 配置 DRACOLoader
          const dracoLoader = new DRACOLoader()
          // 设置 DRACO 解码器的路径，根据实际情况修改
          dracoLoader.setDecoderPath(
            'http://zfatt.oss-cn-beijing.aliyuncs.com/threejs/draco/'
          )
          gltf_loader.setDRACOLoader(dracoLoader)
          try {
            gltf_loader.parse(
              arrayBuffer,
              '',
              gltf => {
                console.log('当前模型数据gltf:', gltf.scene)
                this.addForm.vrModelComponentReqList = []
                this.editForm.vrModelComponentReqList = []
                this.addForm.vrModelComponentReqList = gltf.scene.children[0].children.map(
                  child => ({
                    componentSign: child.name,
                    componentInfo: '',
                    componentName: '',
                    componentCover: ''
                  })
                )
                this.editForm.vrModelComponentReqList = this.addForm.vrModelComponentReqList
                this.handleResourceUpload(file, file.name)
                // 更新lock状态
              },
              error => {
                // 处理解析过程中的错误
                this.$message.error(`解析模型时发生错误: ${error.message}`)
              }
            )
          } catch (error) {
            // 捕获其他可能的错误
            this.$message.error(`发生未知错误: ${error.message}`)
          }
        }

        reader.onerror = () => {
          this.$message.error('读取文件时发生错误，请重新上传')
        }

        reader.readAsArrayBuffer(file)
      }
    },
    /**
     * 拖拽上传文件 / 目录
     */
    handleFileDrop(event) {
      this.stopEvent(event)
      if (this.objects.length > 0) {
        this.$message.error('只能上传一个文件，请先删除已上传的文件')
        return
      }
      const items = event.dataTransfer.items
      if (!items.length || items[0].kind !== 'file') return
      for (const item of items) {
        const file = item.getAsFile()
        if (file) {
          this.handleResourceUpload(file, file.name)
        }
      }
    },
    async checkOSSResource() {
      // 验证 OSS 文件目录存在
      const { res } = await listObjects(this.editForm.modelUrl)
      this.resourceMessage =
        res.requestUrls && res.requestUrls.length
          ? `<em style="color: #67C23A">资源已上传到服务器</em>`
          : `<em style="color: #F56C6C">资源已被删除, 需重新上传</em>`
    },
    /**
     * 阻止浏览器默认操作
     */
    stopEvent(event) {
      event.stopPropagation()
      event.preventDefault()
    },
    /**
     * 模拟点击
     */
    clickElement(event, el) {
      event.stopPropagation()
      this.$refs[el].click()
    },
    /**
     * 删除已上传文件
     */
    deleteUploadedFile(index) {
      this.objects.splice(index, 1)
      this.checkSuccess()
    },
    /**
     * 打开组件管理
     */
    openadmin(item) {
      console.log('测测', item.vrModelId)
      this.vrModelId = item.vrModelId
      this.glbdetailshow = true

      // 查询模型子组件数据传递
    },
    glbdetailsUpdate(updatedDetails) {
      // 更新本地缓存
      // const cachedTableData = localStorage.getItem('tableDate')
      // let tableData = cachedTableData ? JSON.parse(cachedTableData) : []
      // // 根据 ID 更新表格数据
      // tableData = tableData.map(item => {
      //   if (item.vrModelId === updatedDetails.vrModelId) {
      //     return { ...item, ...updatedDetails }
      //   }
      //   return item
      // })
      // // 更新本地缓存
      // localStorage.setItem('tableDate', JSON.stringify(tableData))
      // // 更新 this.tableDate 和 this.glbdetails，确保响应式
      // this.tableDate = [...tableData]
      // this.glbdetails = { ...updatedDetails }
    },
    back() {
      this.glbdetailshow = false
    },
    // 跳转到模型预览页新开一个href
    openhref(item) {
      console.log('跳转前读取', item)

      if (item.modelUrl) {
        const modelUrl = this.$router.resolve({
          name: 'glbView',
          query: { data: JSON.stringify({ vrModelId: item.vrModelId }) }
        }).href
        window.open(modelUrl, '_blank')
      } else {
        this.$message.error('模型资源不存在')
      }
    },
    introductionAddChange(data) {
      this.addForm.modelInfo = data.html
      this.editForm.modelInfo = data.html
    },
    openDelete(item) {
      this.$confirm('是否删除该模型?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          removeVrModel({
            vrModelId: item.vrModelId
          }).then(async res => {
            if (res.code == '200') {
              this.$message({
                message: '删除成功',
                type: 'success'
              })
              this.getDateList()
            } else {
              this.$message({
                message: res.message,
                type: 'error'
              })
            }
          })
        })
        .catch(() => {})
    }
  }
}
</script>
<style lang="scss" scoped>
.el-upload-dragger {
  width: 100%;
}

.el-upload--text {
  width: 100%;
  height: 100px;
}

.el-upload-list {
  overflow: auto;
  width: 100%;
  height: 100px;
  margin: 5px 0;
}

.upload-content {
  width: 100%;
  height: 100px;
  display: block;
}
</style>
